<template>
  <div class="user-data">
    <a-row :gutter="30">
      <a-col :span="12">
        <a-card title="每日数据变化" :bordered="false">
          <!-- <a-card :span="24"> -->

          <!-- </a-card> -->
          <div style="background: #ffffff; padding: 5px">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-card>
                  <a-statistic
                    title="用户总数量"
                    :value="sum"
                  />
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card>
                  <a-statistic
                    title="日环比"
                    :value="Math.abs(compareDay)"
                    :precision="2"
                    suffix="%"
                    :value-style="{ color: '#3f8600' }"
                  >
                    <template #prefix>
                      <a-icon :type="compareDay>=0 ? 'arrow-up' : 'arrow-down'" />
                    </template>
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card>
                  <a-statistic
                    title="周同比"
                    :value="Math.abs(compareWeek)"
                    :precision="2"
                    suffix="%"
                    class="demo-class"
                    :value-style="{ color: '#cf1322' }"
                  >
                    <template #prefix>
                      <a-icon :type="compareWeek>=0 ? 'arrow-up' : 'arrow-down'" />
                    </template>
                  </a-statistic>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12" style="text-align: left">
        <a-card title="用户数量变化分析" :bordered="false">
          <div class="explain">
            <p>
              系统拥有用户总数量{{sum}}人，今日新增用户数{{up}}人。<br />
              相较于昨日，增长了{{compareDay.toFixed(2)}}%，相较于上周，减少了{{compareWeek.toFixed(2)}}%。
            </p>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- <echart-line :msg="userMsg" class="echart"></echart-line> -->
    <a-row :gutter="[24, 40]">
      <a-col :span="24">
        <a-card title="新增用户">
          <ve-line
            :data="chartData"
            :settings="chartSettings"
            :extend="extend"
            height="350px"
          ></ve-line>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import EchartLine from "./EchartLine";
import { getUserData } from '../../../../network/visual'
export default {
  name: "UserData",
  components: {
    EchartLine,
  },
  data() {
    return {
      userMsg: {
        title: "用户数量变化曲线图/柱状图",
        data: [150, 230, 224, 218, 135, 147, 260],
      },
      chartData: {
        columns: ["date", "count"],
        rows: [],
      },
      sum: 0,
      chartSettings: {
        area: true,
      },
      extend: {
        toolbox: {
          show: true,
          feature: {
            //各工具配置项
            saveAsImage: {},
            // dataView: {
            //   //数据视图
            //   readOnly: false,
            // },
            restore: {},
            magicType: {
              //动态类型切换
              type: ["line", "bar"],
            },
          },
        },
      },
    };
  },
  computed: {
    compareDay() {
      let today = this.chartData.rows.length !== 0 && this.chartData.rows[0].count
      let yesterday = this.chartData.rows.length !== 0 && this.chartData.rows[1].count
      return (today - yesterday) / yesterday
    },
    compareWeek() {
      let today = this.chartData.rows.length !== 0 && this.chartData.rows[0].count
      let lastWeek = this.chartData.rows.length !== 0 && this.chartData.rows[this.chartData.rows.length - 1].count
      return (today - lastWeek) / lastWeek
    },
    up() {
      let today = this.chartData.rows.length !== 0 && this.chartData.rows[0].count
      return today
    }
  },
  async created() {
    // 请求数据
    const res = await getUserData()
    if (res.data.code === 200) {
      console.log(res);
      this.chartData.rows = res.data.data.statistics
      this.sum = res.data.data.sum
      console.log(this.chartData.rows);
      console.log(this.sum);
    }
  },
};
</script>

<style lang="less" scoped>
.user-data {
  padding: 40px;
  text-align: center;
  .explain {
    margin-top: 20px;
  }
}
</style>
